<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div style="width:1120px;height:1300px;margin:auto">
        <!-- header -->
        <div style="background:rgb(156, 156, 160);height:20%;">
            <img src="imgs/hot.jpg" style="height:130px;border-radius:30px;float:left;width:15%" alt="热帖榜">
            <div style="margin-left:200px;width:75%">
                <p style="font-size:40px;padding-left:10px;">
                    <b>热帖吧</b>
                </p>
                <p style="padding-left:10px;"> 最火，最热，最佳贴</p>
                <p style="padding-left:10px;">
                    <span>
                        <b>帖子总数:</b>
                    </span>
                    <span style="color:red">100</span>
                </p>
                <p style="height:10px;clear:both"></p>

            </div>
        </div>
        <!-- footer -->
        <div style="margin-top:20px;background:burlywood;height:70%">
            <ul>
                <li class="row" style="vertical-align: middle;border-bottom:1px solid gray;list-style: none;align-content: center;">
                    <!-- <p class="touxiang" style="display:inline-block;border-radius:5px;background:gray;width:5%;text-align:center;line-height:50%;align:center">12</p> -->
                   
                    <div>
                        <p class="col-xs-4 col-offset-xs-1" style="align-content:center;" id="left">
                            
                            <img src="imgs/share.jpg" style="height:80px;border-radius:10px;float:left;" alt="头像" /> 
                        </p>
                        <div class="col-xs-6" class="tiezi" id="right">
                            <a href="card_detail?id=${c.t_id }" target="_parent">
                                <B>帖子题目</B>
                            </a>
                            <br />
                            <p style="width: 660px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">帖子部分内容
                            </p>

                            <div class="pinglun">
                                <p>${c.time}&nbsp;&nbsp;来源 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;赞（3）回复（2)
                                    </br>
                                    <br>
                                </p>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="row" style="vertical-align: middle;border-bottom:1px solid gray;list-style: none;align-content: center;">
                        <!-- <p class="touxiang" style="display:inline-block;border-radius:5px;background:gray;width:5%;text-align:center;line-height:50%;align:center">12</p> -->
                       
                        <div>
                            <p class="col-xs-4 col-offset-xs-1" style="align-content:center;" id="left">
                                
                                <img src="imgs/share.jpg" style="height:80px;border-radius:10px;float:left;" alt="头像" /> 
                            </p>
                            <div class="col-xs-6" class="tiezi" id="right">
                                <a href="card_detail?id=${c.t_id }" target="_parent">
                                    <B>帖子题目</B>
                                </a>
                                <br />
                                <p style="width: 660px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">帖子部分内容
                                </p>
    
                                <div class="pinglun">
                                    <p>${c.time}&nbsp;&nbsp;来源 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;赞（3）回复（2)
                                        </br>
                                        <br>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </li>
            </ul>

        </div>
    </div>
</body>

</html>